import React from 'react'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Form, Input, Button, Breadcrumb, DatePicker, Modal } from 'antd'
import TableList from './component/TableList'
import TableDetailsList from './component/TableDetailsList'
import BuyerModal from './AdBuyerModal/index'
import DateSearch from '../../components/DateSearch/index'
import styles from './index.less'


const { RangePicker } = DatePicker;
const FormItem = Form.Item;

@Form.create()
@connect(({ buyer, loading, login }) => ({
  buyer,
  login,
  loading: loading.models.buyer,
}))

export default class BuyerList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isDetails: true,
      modalVisibel: false,
      buyerItem: {},
      Ids: [],
      detailsPageSize: 1,
      dateStrings: [],
      filter: {
        storeName: '',
      },
      lookstate: 0
    }
  }

  onHideModal = () => {
    this.setState({ modalVisibel: false })
  }

  onGetDetails = (record) => {
    console.log('record', record)
    this.setState({ isDetails: false, buyerItem: record })
    this.props.dispatch({
      type: 'buyer/getStoreFinancialDetails',
      payload: { storeId: record.id }
    })
  }

  onGetList = () => {
    this.setState({ isDetails: true })
  }

  onLook = (record, status) => {
    this.setState({
      lookstate: status,
      modalVisibel: true,
      buyerItem: record
    })
    this.props.dispatch({
      type: "buyer/findOne",
      payload: { id: record.id }
    })
  }

  onStick = (record) => {
    console.log('点击')
    this.props.dispatch({
      type: "buyer/stick",
      payload: record.id
    })
  }

  onHandleSelect = (selectedRowKeys) => {
    console.log('selectedRowKeys', selectedRowKeys)
    this.setState({ Ids: selectedRowKeys })
  }

  onDelete = () => {
    const { Ids } = this.state
    Modal.confirm({
      title: '确定要删除此商家?',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.props.dispatch({
          type: "buyer/deleteStore",
          payload: Ids
        })
      },
    });
  }

  onEditBuyer = (data) => {
    this.setState({ modalVisibel: false })
    this.props.dispatch({
      type: "buyer/updateStore",
      payload: data
    })

  }

  onSearch = () => {
    const { getFieldValue } = this.props.form
    let storeName = getFieldValue("storeName") ? getFieldValue("storeName") : "";
    this.setState({
      filter: {
        storeName,
        index: 1,
      }
    })
    this.props.dispatch({
      type: "buyer/SearchStoreName",
      payload: { storeName }
    })
  }

  onHandleChangePage = (page) => {
    console.log(page);
    const { filter } = this.state;
    this.props.dispatch({
      type: "buyer/getStoreListPage",
      payload: { ...filter, index: page }
    })
  }

  onDetailsPageSize = (page) => {
    const { buyerItem } = this.state
    this.setState({ detailsPageSize: page })
    this.props.dispatch({
      type: "buyer/getStoreFinancialDetailsPage",
      payload: {
        storeId: buyerItem.id,
        index: page
      }
    })
  }

  onChangeDate = (dateStrings) => {
    this.setState({ dateStrings: dateStrings })
    console.log("123", 'From: ', dateStrings[0], ', to: ', dateStrings[1]);
  }

  onHandleTimeSearch = () => {
    console.log(12345)
    const { detailsPageSize, buyerItem, dateStrings } = this.state
    this.props.dispatch({
      type: "buyer/getStoreFinancialDetailsDate",
      payload: {
        storeId: buyerItem.id,
        beginTime: dateStrings && dateStrings[0],
        endTime: dateStrings && dateStrings[1],
        index: detailsPageSize
      }
    })
  }


  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form
    const { isDetails, modalVisibel, buyerItem, Ids, lookstate } = this.state
    const { storeListItem, findOneItem, storeListTotal, storeListDetails } = this.props.buyer
    const { buyerName } = storeListDetails;
    const { loading } = this.props;
    const { isAdmin } = this.props.login
    return (
      <div className={styles.BuyerList}>
        {isDetails ?
          <div>
            <div className={styles.header}>
              <Form layout="inline">
                <FormItem >
                  {getFieldDecorator('storeName')(
                    <Input size="large" style={{ width: '200px' }} placeholder="请输入商家名称" />
                  )}
                </FormItem>
                <FormItem>
                  <Button type="primary" size="large" onClick={this.onSearch}>搜索</Button>
                </FormItem>
              </Form>
              <div className={styles.btn}>
                {/* <Button type="primary" ghost>添加商家</Button> */}
                <Button type="primary" ghost disabled={Ids.length > 0 ? false : true} onClick={this.onDelete}>删除商家</Button>
              </div>
            </div>
            <div>
              <TableList
                storeListTotal={storeListTotal}
                onHandleChangePage={this.onHandleChangePage}
                onHandleSelect={this.onHandleSelect}
                onLook={this.onLook}
                storeListItem={storeListItem}
                loading={loading}
                onGetDetails={this.onGetDetails}
                onStick={this.onStick} />
            </div>
          </div> :
          <div>
            <Breadcrumb separator=">">
              <Breadcrumb.Item onClick={this.onGetList}><a>商家列表</a></Breadcrumb.Item>
              <Breadcrumb.Item><b>商家详情</b></Breadcrumb.Item>
            </Breadcrumb>
            <div className={styles.details_header}>
              <ul>
                <li><span>商家名称:</span><span>{storeListDetails && storeListDetails.buyerName}</span></li>
                <li>
                  <ul>
                    <li style={{ float: 'left' }}><DateSearch onChangeDate={this.onChangeDate} /></li>
                    <li style={{ float: 'left', marginLeft: '20px' }}><Button type="primary" size="large" onClick={this.onHandleTimeSearch} >搜索</Button></li>
                  </ul>
                </li>
              </ul>
            </div>
            <TableDetailsList
              onDetailsPageSize={this.onDetailsPageSize}
              loading={loading}
              storeListDetails={storeListDetails} />
          </div>
        }
        {modalVisibel && <BuyerModal
          onEditBuyer={this.onEditBuyer}
          findOneItem={findOneItem}
          modalVisibel={modalVisibel}
          lookstate={this.state.lookstate}
          onHideModal={this.onHideModal} />}
      </div>
    );
  }
};
